<html>
  <head>
    <meta charset="UTF-8">
    <title>brainstormer</title>

    <link type="text/css" href="css/simple.css" rel="stylesheet" />	
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery-ui.min.js"></script>
    <script src="js/socket.io.min.js"></script>

    <script src="../../server/clientInterface.js" > </script>
    <script src="js/simple.js" ></script>
  </head>
  <body>
    <div class="headerBox">
      <h1 id="title"> Comment rendre les gens plus créatif</h1>
      <div id="progressBar">
	<span id="progress"></span>
      </div>
    </div>
    <div class="ideasBoxContainer">


      <div id="otherIdeas" class="ideasBox">

      </div>
    </div>
    <div id="inputBox">
      
      <textarea id="proposition"></textarea>
      <button id="send"> Soumettre </button>
    </div>


    <div id="selectbestIdeasMessage" class="message active">
      <h1 data-title="Favorites">Favorites</h1> 
      <p>
	Choisissez vos 5 idées favorites, sur lesquelles vous aimeriez continuer de travailler pour trouver une solution au probleme : <span name="probleme"></span>
	Les idées sélectionnées ne sont pas forcement réalisables ou parfaites, ce sont seulement des pistes d'exploration que vous aimeriez garder ou présenter.
      <p>
	<button id="selectbestIdeasStart"> Selectionner 5 idées </button>
	<ol id="bestIdeas"></ol>
    </div>

    <div id="selectmostInspiringIdeasMessage" class="message active">
      <h1 data-title="Inspiration">Inspiration </h1> 
      <p>
	Quelles sont les idées vous ont le plus inspirées pendant la séance.
      <p>
	<button id="selectmostInspiringIdeasStart"> Selectionner les 5 idées les plus inspirantes</button>
	<ol id="mostInspiringIdeas"></ol>
    </div>

    <div id="selectmostSurprisingIdeasMessage" class="message active">
      <h1 data-title="Originalité">Originalité </h1> 
      <p>
	Quelles sont les idées qui vous parraissent les plus originales ou qui vous ont le plus surprises pendant la séance. 
      <p>
	<button id="selectmostSurprisingIdeasStart"> Selectionner les 5 idées les plus originales</button>
	<ol id="mostSurprisingIdeas"></ol>
    </div>

    <div id="selectmostUtileIdeasMessage" class="message active">
      <h1 data-title="Utilité">Utilité</h1> 
      <p>
	Quelles sont les idées qui vous parraissent les plus utiles ou les plus adéquates pour le problème :  <span name="probleme"></span>.
	.
      <p>
	<button id="selectmostUtileIdeasStart"> Selectionner les 5 idées les plus utiles </button>
	<ol id="mostUtileIdeas"></ol>
    </div>

    <div id="questionnaireMessage" class="message active">
      <h1>Questionnaire </h1> 
      <p>
	Les questions suivantes sont là pour évaluer votre ressenti sur la séance de brainstorming que vous venez de faire. Pour mesurer la qualité des idées on s’intéresse à deux critères : l’utilité et l’originalité.
	Utilité : Est-ce que l’idée répond de manière satisfaisante au problème traité.
	Originalité : Est-ce que l’idée est une solution nouvelle ou inattendue pour vous pour le problème traité.    
      <p>
	<button id="questionnaireEnd"> Suite </button>
    </div>

    <div id="questionnaireMessage2" class="message active">
      <h1>Questionnaire 2</h1> 
      <button id="questionnaireEnd2"> Retour à l'accueil </button>
    </div>

    <div id="questionnaireMessage3" class="message active">
      
      <h1 id="q3Show">Questionnaire 3</h1> 
      <p>
	Un agent informatique a participé à la session de brainstorming, ses suggestions sont indiquée en rouge.
  <button id="q3Hide"> cacher le questionnaire pour voir les suggestions   </button>
      <p>
	<button id="questionnaireEnd3"> Retour à l'accueil </button>
    </div>
  </body>
</html>



